$(function(){
  var a=0
  var b=0
  $('.on').click(function(){
    if(a==0&&b==0)
    {
      a=1
      $(this).children().stop().animate({
        top:30},200)
      $(this).children().children().mouseover(function(){
        $(this).siblings().css("background-color"," brown")
        $(this).css("background-color","red")
      })
      // $('.on').off('mouseover')
      $('.on').mouseover(function(){
        b=1
        $(this).children().children().mouseover(function(){
          $(this).siblings().css("background-color"," brown")
          $(this).css("background-color","red")
        })
        $('.in').stop().animate({
        top:30},100)
        $(this).siblings().children().stop().css("top","-90px")
      })
      $('.on').mouseout(function(){
        $(this).children().children().css("background-color"," brown")
      })
    }
    else
    {
      a=0
      b=0
      $('.in').stop().animate({
        top:-90},200)
      $('.on').off('mouseover')
      // $('.on').mouseover(function(){
      //   b=0
      //   $(this).children().stop().css("top","-90px")
      // })
    }
    return false
  })
  $('html').click(function(){
    a=0
    b=0
    $('.on').off('mouseover')
    $('.in').stop().animate({
      top:-90},200)
  })
})